<template>
  <div class="card-container">
    <h3 class="title">甄选运营后台管理平台</h3>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane name="account">
        <template #label>
          <div class="tabs-icon">
            <el-icon :size="16">
              <User />
            </el-icon>
            <span style="margin-left: 3px">账号密码</span>
          </div>
        </template>
        <UserCard ref="accountRef" @changeValue="(val: boolean) => (loading = val)" />
      </el-tab-pane>
      <el-tab-pane name="phone">
        <template #label>
          <div class="tabs-icon">
            <el-icon :size="16">
              <Iphone />
            </el-icon>
            <span style="margin-left: 3px">手机验证码</span>
          </div>
        </template>
        <CodeCard ref="codeRef" />
      </el-tab-pane>
    </el-tabs>
    <div class="fotter">
      <el-checkbox v-model="checked" label="记住密码" size="large" />
      <div class="wj-password">忘记密码</div>
    </div>
    <el-button :loading="loading" style="width: 100%" type="primary" @click="submitLogin">立即登录</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import UserCard from './cardUser.vue';
import CodeCard from './cardCode.vue';

const checked = ref(false);
const activeName = ref('account');
const accountRef = ref<InstanceType<typeof UserCard>>(); // ref绑定组件实例，构造器的返回实例
const codeRef = ref<InstanceType<typeof CodeCard>>();
const loading = ref(false);

const submitLogin = () => {
  if (activeName.value === 'account') {
    accountRef.value?.loginAction();
  } else if (activeName.value === 'phone') {
    codeRef.value?.codeAction();
  }
};
</script>

<style lang="scss" scoped>
.card-container {
  width: 330px;
  .title {
    text-align: center;
    margin-bottom: 15px;
  }
  .fotter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wj-password {
      font-size: 14px;
      color: #409eff;
    }
  }
}
.tabs-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
